<template>
  <div class="bookshop_page">
    <div v-show="flag">
      <!-- 输入框组件 -->
      <header-nav v-show="dayList"></header-nav>

      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in imgsList" :key="index">
          <img :src="item.cover" alt="" v-lazy="item.cover" />
        </van-swipe-item>
      </van-swipe>

      <!-- 排行榜icon -->
      <div v-show="dayList" class="ranking">
        <div @click="changePage(0)" class="item">
          <div class="iconfont icon-paixing"></div>
          <span>排行</span>
        </div>
        <div class="item" @click="changePage(1)">
          <div class="iconfont icon-renqi"></div>
          <span>人气</span>
        </div>
        <div class="item" @click="changePage(2)">
          <div class="iconfont icon-danxuankuangxuanzhong"></div>
          <span>完结</span>
        </div>
        <div class="item" @click="changePage(3)">
          <div class="iconfont icon-kafeiguan"></div>
          <span>畅销</span>
        </div>
        <div class="item" @click="changePage(4)">
          <div class="iconfont icon-zuanshi"></div>
          <span>免费</span>
        </div>
      </div>

      <!-- 推荐 -->
      <div v-show="dayList" class="remList">
        <div class="rem">推荐</div>
        <div class="content">
          <!-- Swiper -->
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div
                class="swiper-slide"
                v-for="(item, index) in weekList"
                :key="index"
                @click="readBookFun(item.id, item.title)"
              >
                <div class="img">
                  <img :src="item.cover" alt="" v-lazy="item.cover" />
                </div>
                <div class="title">{{ item.title }}</div>
                <div class="author">{{ item.author }}</div>
              </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
          </div>
        </div>
      </div>

      <!-- 本周爆款 -->
      <div v-show="dayList" class="hotWeek">
        <div class="top">本周爆款来了</div>
        <div class="content">
          <div
            tag="div"
            @click="hotWeekFun(item.id, item.title)"
            class="item"
            v-for="(item, index) in hotList"
            :key="index"
          >
            <div class="img">
              <img :src="item.cover" alt="" />
            </div>
            <div class="detail">
              <div class="title">{{ item.title }}</div>
              <div class="author">{{ item.author }}</div>
              <div class="recomContent">
                {{ item.content }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 24小时热销榜 -->
      <div v-show="dayList" class="hotday">
        <div class="top">24小时热销榜</div>
        <div class="content">
          <div
            class="item"
            @click="hotDayFun(item.id, item.title)"
            v-for="(item, index) in dayList"
            :key="index"
          >
            <div class="img">
              <img :src="item.cover" alt="" />
            </div>
            <div class="title">{{ item.title }}</div>
          </div>
        </div>
        <!-- 点击查看榜单 -->
        <router-link tag="div" to="/sorter" class="toOtherPage">
          点击查看榜单<span class="iconfont icon-xiangyoujiantou"></span>
        </router-link>
      </div>

      <!-- 底部导航 -->
      <footer-nav></footer-nav>
    </div>
  </div>
</template>

<script>
import headerNav from "../components/base/headerNav.vue";
import footerNav from "../components/base/footerNav.vue";
import Swiper from "swiper";
import { getStoreShow } from "../api/base";
export default {
  name:'bookshop',
  data() {
    return {
      active: 2,
      imgsList: [],
      weekList: [],
      hotList: [],
      dayList: [],
      flag: false,
    };
  },
  components: {
    headerNav,

    footerNav,
  },
  mounted() {
    new Swiper(".swiper-container", {
      slidesPerView: 4,
      paginationClickable: true,
      observer: true,
      observeParents: true,
    });
  },
  methods: {
    getStoreShowFun() {
      this.$toast.loading({
        message: "加载中...",
        overlay: true,
      });
      getStoreShow().then((data) => {
        console.log(data);

        // 轮播图
        this.imgsList = data.data.list[0].banners;
        // 推荐
        this.weekList = data.data.list[2].list;
        // 本周爆款
        this.hotList = data.data.list[3].list;
        // 24小时爆款
        this.dayList = data.data.list[4].list;
        if (this.imgsList.length != 0) {
          console.log(111);
          this.$toast.clear();
          this.flag = true;
        }
      });
    },

    // 跳到详情页面
    readBookFun(id, title) {
      // this.$router.push({name:"introduce",params:{id,title}})
      // 调用vuex存储状态
      this.$store.commit("setBookInfo", { id, title });
      this.$router.push({ name: "introduce" });
    },

    // 跳到分类页面
    changePage(num) {
      // 调用vuex存储状态
      this.$store.commit("setSorterInfo", num);
      this.$router.push({ name: "sorter" });
    },

    // 本周热门跳详情
    hotWeekFun(id, title) {
      // 调用vuex存储状态
      this.$store.commit("setBookInfo", { id, title });
      this.$router.push({ name: "introduce" });
    },

    // 一天热门跳详情
    hotDayFun(id, title) {
      // 调用vuex存储状态
      this.$store.commit("setBookInfo", { id, title });
      this.$router.push({ name: "introduce" });
    },
  },
  created() {
    
  },
  activated(){
    if(this.imgsList.length == 0)
    this.getStoreShowFun();
  }
};
</script>

<style lang="less">
.bookshop_page {
  width: 100%;
  //   height: 700px;

  background-color: #f6f6f6;
  padding: 0 20px;
  box-sizing: border-box;
  padding-bottom: 40px;

  .ranking {
    display: flex;
    margin-bottom: 10px;
    .item {
      width: 20%;
      text-align: center;
      .iconfont {
        font-size: 24px;
      }
      span {
        font-size: 14px;
      }
    }
  }

  // 轮播图
  .my-swipe {
    border-radius: 10px;
    margin-bottom: 10px;
    .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      // background-color: #39a9ed;
    }

    img {
      width: 345px;
      height: 130px;
    }
  }

  .remList {
    .rem {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .content {
      .swiper-container {
        padding-bottom: 15px;
        border-bottom: 1px solid #bebebe;
        margin-bottom: 20px;
        .swiper-slide {
          .img {
            width: 74px;
            height: 104px;
            margin-bottom: 5px;
            img {
              width: 74px;
              height: 104px;
            }
          }
          .title {
            width: 74px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            margin-bottom: 8px;
            color: #383838;
            font-size: 15px;
          }
          .author {
            font-size: 12px;
            color: #bebebe;
            line-height: 12px;
          }
        }
      }
    }
  }

  .hotWeek {
    border-bottom: 1px solid #bebebe;
    margin-bottom: 20px;
    .top {
      font-size: 18px;
      line-height: 18px;
      font-weight: bold;
      margin-bottom: 16px;
    }
    .content {
      .item {
        display: flex;
        margin-bottom: 15px;
        .img {
          width: 70px;
          height: 97px;
          margin-right: 8px;
          img {
            width: 70px;
            height: 97px;
          }
        }
        .detail {
          .title {
            margin-bottom: 10px;
            font-weight: bold;
            line-height: 15px;
          }
          .author {
            font-size: 14px;
            margin-bottom: 10px;
            line-height: 14px;
            color: #7c7c7c;
          }
          .recomContent {
            font-size: 12px;
            line-height: 12px;
            color: #7c7c7c;
          }
        }
      }
    }
  }

  .hotday {
    padding-bottom: 20px;
    .top {
      margin-bottom: 20px;
      font-size: 18px;
      color: #242424;
      font-weight: bold;
      line-height: 18px;
    }
    .content {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      .item {
        .img {
          width: 104px;
          height: 145px;
          margin-bottom: 10px;
          img {
            width: 104px;
            height: 145px;
          }
        }
        .title {
          font-size: 14px;
          color: #333232;
          line-height: 14px;
        }
      }
    }
    .toOtherPage {
      text-align: center;
      font-size: 14px;
      line-height: 14px;
      color: #959595;
      span {
        font-size: 14px;
      }
    }
  }
}
</style>